<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/21
  Time: 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java"  contentType="text/html; charset=utf-8"%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<html>
<head lang="en">
    <title>avalon</title>
    <script type="text/javascript" src="avalon/avalon.js" ></script>
    <script type="text/javascript" src="js/jquery.js"></script>

</head>
    <body>
    <div ms-controller="wrap">
        <span>{{a}}</span>
        <br>
        <input ms-duplex="a">
    </div>
    <div ms-controller="wrap2">
        {{a}}
        <span>{{b}}</span>
    </div>
    <%--公告例子--%>

    <%--公告例子end--%>

    <script type="text/javascript">
        var abc = avalon.define({  //abc是随便起的一个名字，用作该Model的载体
            $id: "wrap",   //告诉avalon这个Model是作用于哪个ms-controller的
            a: "Hello!"   //定义一个avalon对象属性“a”，其值是“Hello!”
        });
        var def = avalon.define({
            $id: "wrap2",
            a:"dajiahao",
            b:"happy"+" "+abc.a
        });

    </script>

    <%--g公告avalon代码start--%>
    <script type="text/javascript">
        var gg=[{"id":"1","title":"公告文章标题1"},{"id":"2","title":"公告文章标题2"},
            {"id":"3","title":"文章标题3"},{"id":"4","title":"文章标题4"}];
        var bd=[{"id":"1","title":"媒体报道文章标题1"},{"id":"2","title":"媒体报道文章标题2"},
            {"id":"3","title":"媒体报道文章标题3"},{"id":"4","title":"媒体报道文章标题4"}];
    </script>

    <div ms-controller="list">
        <span ms-mouseover="changeUl(1)">公告</span>
        <span ms-mouseover="changeUl(0)">媒体报道</span>
        <a ms-href="'#!/'+more_name">{{more_text}}</a>
        <ul>
            <li ms-repeat="infoList">
                <a ms-href="'#!/'+ more_name + '/' + el.id" ms-title="el.title">{{el.title}}</a>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var vm = avalon.define({
            $id: "list",
            more_name: "gg",
            more_text: "更多公告",
            gg:gg,   //获取公告JSON数据
            bd:bd,   //获取媒体报道JSON数据
            infoList:gg,
            changeUl:function(flag){
                vm.infoList= [];//在赋值前要将数据先清空，否则有可能无法赋值！！！
                if(flag){  //鼠标移过“公告”选项卡头部
                    vm.more_name = "gg";
                    vm.more_text = "更多公告";
                    vm.infoList = vm.gg;
                }else{  //鼠标移过“媒体报道”选项卡头部
                    vm.more_name = "bd";
                    vm.more_text = "更多报道";
                    vm.infoList = vm.bd;//infoList变为媒体报道JSON数据
                }
                //avalon.scan(null,vm);
            }
        });
        avalon.scan(); //这句话可以不加，因为avalon有自己的DOMReady模块，会自动扫描全文。
    </script>
    </body>
</html>
